<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="icon" href="./images/logoWeb.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">


<title>Insert title here</title>

<style type="text/css">
.button {
	display: flex;
	width: 100%;
	height: 100px;
	justify-content: center;
	align-items: center;
}
</style>
</head>
<body>
	<div id="app" >
		<div :style="isShow" >
			<div class="m-2">
				<form class="form-inline mb-2 mt-2">
					<div class="input-group mr-2 input-group-sm">
						<div class="input-group-prepend">
							<span class="input-group-text" id="basic-addon1">学号</span>
						</div>
						<input @keyup="getList(1)" v-model="query.sNumber" type="text"
							class="form-control" placeholder="请输入学号">
					</div>

					<div class="input-group mr-2 input-group-sm">
						<div class="input-group-prepend">
							<span class="input-group-text" id="basic-addon1">姓名</span>
						</div>
						<input v-model="query.name" type="text" class="form-control"
							placeholder="请输入姓名">
					</div>

					<div class="input-group mr-2 input-group-sm">
						<div class="input-group-prepend">
							<span class="input-group-text" id="basic-addon1">班级</span>
						</div>
						<input v-model="query.grade" type="text" class="form-control"
							placeholder="请输入班级">
					</div>

					<div class="input-group mr-2">
						<button @click="getList(1)" type="button"
							class="btn btn-primary btn-sm">
							<i class="fa fa-search" aria-hidden="true"></i> 查询
						</button>
					</div>

				</form>

				<button @click="openAddWin" type="button" class="btn btn-primary">
					<i class="fa fa-plus" aria-hidden="true"></i> 新增
				</button>

				<button @click="execMutiDel" type="button" class="btn btn-danger">
					<i class="fa fa-trash-o" aria-hidden="true"></i> 删除
				</button>

			</div>
			<table class="table">
				<thead class="thead-dark">
					<tr>
						<th scope="col">选择</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">性别</th>
						<th scope="col">籍贯</th>
						<th scope="col">班级</th>
						<th scope="col">出生日期</th>
						<th scope="col">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in page.list">
						<td>
							<!-- :value  动态的值 ，多选框应该绑定一个数组：idArr --> <input type="checkbox"
							:value="item.id" v-model="idArr">
						</td>
						<td>{{item.sNumber}}</td>
						<td>{{item.name}}</td>
						<td>{{item.sex}}</td>
						<td>{{item.address}}</td>
						<td>{{item.grade}}</td>
						<td>{{item.birthday}}</td>
						<td>
							<button @click="openUpdWin(item)" type="button"
								class="btn btn-primary btn-sm">
								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
							</button>
							<button @click="execDelete(item.id)" type="button"
								class="btn btn-danger btn-sm">
								<i class="fa fa-trash-o" aria-hidden="true"></i>
							</button>
						</td>
					</tr>
				</tbody>
			</table>

			<!-- 分页开始 -->
			<div>
				<nav
					style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
					<ul class="pagination pagination-sm">
						<li class="page-item"><a class="page-link" href="#"
							@click.prevent="getList(1)">第一页</a></li>
						<li class="page-item"><a class="page-link" href="#"
							@click.prevent="getList(page.previous)">上一页</a></li>
						<li class="page-item"><a class="page-link" href="#"
							@click.prevent="getList(page.next)">下一页</a></li>
						<li class="page-item"><a class="page-link" href="#"
							@click.prevent="getList(page.last)">最后一页</a></li>
					</ul>
					<ul class="pagination pagination-sm">
						<li class="page-item">
							当前第{{page.pageIndex}}页{{page.size}}条记录，共{{page.pages}}页{{page.total}}条记录
						</li>
					</ul>
				</nav>
			</div>
			<!-- 分页结束 -->

			<!-- 修改窗口开始 -->
			<form class="form-inline mt-4">
				<div id="win-upd" style="display: none; padding: 15px;">
					<!-- 信息输入开始 -->
					<div class="form-group mb-4 ml-3 mt-4">
						<label class="mr-4">学号</label> <input v-model="updData.sNumber"
							placeholder="请输入学号" type="text" class="form-control mr-5">
						<label class="mr-4">姓名</label> <input v-model="updData.name"
							placeholder="请输入姓名" type="text" class="form-control">
					</div>
					<div class="form-group mb-4 ml-3">
						<label class="mr-4">性别</label> <input v-model="updData.sex"
							placeholder="请输入性别" type="text" class="form-control mr-5">
						<label class="mr-4">籍贯</label> <input v-model="updData.address"
							placeholder="请输入籍贯" type="text" class="form-control">
					</div>
					<div class="form-group mb-4 ml-3">
						<label class="mr-4">班级</label> <input v-model="updData.grade"
							placeholder="请输入班级" type="text" class="form-control mr-5">
						<label class="mr-4">出生</label> <input v-model="updData.birthday"
							placeholder="请输入出生日期" type="text" class="form-control">
					</div>
					<!-- 信息输结束 -->
					<div class="button">
						<button @click="execUpd" type="button"
							class="btn btn-primary btn-lg">提交</button>
					</div>
				</div>
			</form>
			<!-- 修改窗口结束 -->

			<!-- 新增窗口开始 -->
			<form class="form-inline">
				<div id="win-add" style="display: none; padding: 15px;">
					<!-- 信息输入开始 -->
					<div class="form-group mb-4 ml-3 mt-4">
						<label class="mr-4">学号</label> <input v-model="addData.sNumber"
							placeholder="请输入学号" type="text" class="form-control mr-5">
						<label class="mr-4">姓名</label> <input v-model="addData.name"
							placeholder="请输入姓名" type="text" class="form-control">
					</div>
					<div class="form-group mb-4 ml-3">
						<label class="mr-4">性别</label> <input v-model="addData.sex"
							placeholder="请输入性别" type="text" class="form-control mr-5">
						<label class="mr-4">籍贯</label> <input v-model="addData.address"
							placeholder="请输入籍贯" type="text" class="form-control">
					</div>
					<div class="form-group mb-4 ml-3">
						<label class="mr-4">班级</label> <input v-model="addData.grade"
							placeholder="请输入班级" type="text" class="form-control mr-5">
						<label class="mr-4">出生</label> <input v-model="addData.birthday"
							placeholder="请输入出生日期" type="text" class="form-control">
					</div>
					<!-- 信息输结束 -->
					<div class="button">
						<button @click="execAdd" type="button" class="btn btn-dark btn-lg">提交</button>
					</div>
				</div>
			</form>
			<!-- 新增窗口结束 -->
		</div>
	</div>

	<script src="./js/jquery.slim.min.js"></script>
	<script src="./js/popper.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./layer/layer.js"></script>
	<script src="./js/sweetalert2.all.min.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/vue.min.js"></script>
	<script src="./js/request.js"></script>

	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				isShow:"display:none",
				query:{ //查询条件
					pageIndex:1,  //页码
					pageSize:10,  //每页记录数
					sNumber:'',
					name:'',
					grade:''
				},
				//page对象内容来源于服务器，该数据是经过服务器处理的，一定是合理的
				page:{},  //定义分页对象，其中list（本页数据集合）、previous（上一页）、next（下一页）等属性
				//list:[], //定义一个数组对象，用于存放前端发来的数据
				idArr:[],   //存放选中行的数组
				addData:{
					name:'',
					sNumber:'',
					sex:'',
					address:'',
					grade:'',
					birthday:''
				},
				updData:{},
				addWinInx:null,
				updWinInx:null
			},
			methods:{
				getList(pageIndex=1){
					this.query.pageIndex = pageIndex;
					//访问服务器，通过get请求访问服务器地址depList获取数据
					//data是服务器回送的数据
					http_get('depList',this.query).then((data)=>{
						this.page = data;
						this.query.pageIndex = this.page.pageIndex;
						this.query.pageSize = this.page.pageSize;
						this.timer = setTimeout(()=>{   //设置延迟执行
							this.isShow=""
						},300);
						
					})
				},
				//打开新增窗口
				openAddWin(){
					this.addData = {}
					this.addWinInx = layer.open({
						type:1,
						content:$('#win-add'),
						area:['700px','500px'],
						title:"新增学籍信息",
						zIndex:1000,
					});
				},
				//新增数据
				execAdd(){
					if(this.addData.name==null||this.addData.sNumber==null||this.addData.grade==null){
						Swal.fire({
							  type: 'error',
							  text: '学号、姓名或班级为空',
							  showConfirmButton:false,
							  toast:true,
							  timer:1500
							})
							return;
					}
					//访问服务器，通过post请求访问服务器地址depDoAdd增加数据
					http_post('doDepAdd',this.addData).then(()=>{
						this.getList(this.page.last+1)
						layer.close(this.addWinInx);//关闭新增提示窗口
						
					})
				},
				//打开修改窗口
				openUpdWin(item){
					//this.updData = item  //给修改数据赋值
					this.updData = {   //将item数据创建一个副本
							id:item.id,
							name:item.name,
							sNumber:item.sNumber,
							sex:item.sex,
							address:item.address,
							grade:item.grade,
							birthday:item.birthday
					};
					this.updWinInx = layer.open({
						type:1,
						content:$('#win-upd'),
						area:['700px','500px'],
						title:"修改学籍信息",
						zIndex:1000,
					});
				},
				//执行修改
				execUpd(){
					//访问服务器，通过post请求访问服务器地址depDoUpd修改数据
					http_post('doDepUpd',this.updData).then(()=>{
						this.getList(this.page.pageIndex)
						layer.close(this.updWinInx);//关闭提示窗口
						
					})
				},
				//执行删除
				execDelete(id){
					Swal.fire({
						  title: '您确定要删除吗？',
						  text: "数据一旦删除，将不可恢复！",
						  type: 'warning',
						  showCancelButton: true,
						  confirmButtonColor: '#3085d6',
						  cancelButtonColor: '#d33',
						  confirmButtonText: '删除',
						  cancelButtonText: '取消',
						}).then((result) => {
						  if (result.value) {
							  http_post('doDepDel',{id:id}).then(()=>{
								  this.getList(this.page.pageIndex)
								});
						  }
						})
				},
				//执行多删除
				execMutiDel(){
					if(this.idArr.length==0){
						Swal.fire({
							  type: 'error',
							  title: '请选择删除数据',
							  showConfirmButton: false,
							  timer: 1500,
							  toast:true,   //显示小型窗口
							  customClass:{
								  title:'text-danger'
							  }
							})
							return;
					}
					Swal.fire({
						  title: '您确定要删除选择信息吗？',
						  text: "数据一旦删除，将不可恢复！",
						  type: 'warning',
						  showCancelButton: true,
						  confirmButtonColor: '#3085d6',
						  cancelButtonColor: '#d33',
						  confirmButtonText: '删除',
						  cancelButtonText: '取消',
						}).then((result) => {
						  if (result.value) {
							  http_post('depDoMultiDel',{ids:this.idArr}).then(()=>{
								  this.getList(this.page.pageIndex)
								});
						  }
						})
				},
			},
			//该方法在vue将绑定的元素渲染之后，就立即执行
			mounted(){
				this.getList(1)
			}
		})
	</script>
</body>
</html>